<template>
  <div class="app-container home">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="main-title">心悦ERP管理系统</h1>
        <p class="welcome-subtitle">智能化的企业资源管理平台</p>
        <div class="version-info">
          <span class="version-label">当前版本</span>
          <span class="version-badge">v{{ version }}</span>
        </div>
      </div>
      <div class="welcome-decoration">
        <div class="decoration-circle"></div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 系统概览 -->
    <div class="overview-section">
      <h2 class="section-title">系统概览</h2>
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="card-content">
              <h3>生产管理</h3>
              <p>BOM管理、工单管理、生产计划</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="el-icon-box"></i>
            </div>
            <div class="card-content">
              <h3>仓储物流</h3>
              <p>入库管理、出库管理、库存控制</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="el-icon-money"></i>
            </div>
            <div class="card-content">
              <h3>财务管理</h3>
              <p>应收应付、收付款管理、成本核算</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="overview-card">
            <div class="card-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="card-content">
              <h3>客户管理</h3>
              <p>客户信息、订单管理、服务跟踪</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 技术架构 -->
    <div class="tech-section">
      <h2 class="section-title">技术架构</h2>
      <el-row :gutter="24">
        <el-col :xs="24" :md="12">
          <div class="tech-card">
            <h3 class="tech-subtitle">后端技术</h3>
            <div class="tech-list">
              <div class="tech-item">
                <i class="el-icon-s-platform"></i>
                <span>Spring Boot</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-lock"></i>
                <span>Spring Security</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-key"></i>
                <span>JWT</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-connection"></i>
                <span>MyBatis</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-data-line"></i>
                <span>Druid</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :md="12">
          <div class="tech-card">
            <h3 class="tech-subtitle">前端技术</h3>
            <div class="tech-list">
              <div class="tech-item">
                <i class="el-icon-monitor"></i>
                <span>Vue.js</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-s-operation"></i>
                <span>Vuex</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-menu"></i>
                <span>Element UI</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-link"></i>
                <span>Axios</span>
              </div>
              <div class="tech-item">
                <i class="el-icon-brush"></i>
                <span>Sass</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
<!--  -->
    <!-- 快速入口 -->
    <div class="quick-access-section">
      <h2 class="section-title">快速入口</h2>
      <el-row :gutter="16">
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-card" @click="goToModule('/bom/bom')">
            <i class="el-icon-s-order"></i>
            <span>BOM管理</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-card" @click="goToModule('/work/production')">
            <i class="el-icon-s-cooperation"></i>
            <span>生产管理</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-card" @click="goToModule('/storage/warehouse')">
            <i class="el-icon-box"></i>
            <span>仓储管理</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-card" @click="goToModule('/money/receivable')">
            <i class="el-icon-money"></i>
            <span>应收管理</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-card" @click="goToModule('/customer/customer')">
            <i class="el-icon-user"></i>
            <span>客户管理</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-card" @click="goToModule('/system/user')">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      version: "1.0"
    }
  },
  methods: {
    goToModule(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 24px;
  background: #f8f9fa;
  min-height: calc(100vh - 84px);

  // 欢迎区域
  .welcome-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 16px;
    padding: 48px 40px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    color: white;

    .welcome-content {
      position: relative;
      z-index: 2;
    }

    .main-title {
      font-size: 36px;
      font-weight: 300;
      margin: 0 0 12px 0;
      letter-spacing: 1px;
    }

    .welcome-subtitle {
      font-size: 18px;
      opacity: 0.9;
      margin: 0 0 24px 0;
      font-weight: 300;
    }

    .version-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .version-label {
      font-size: 14px;
      opacity: 0.8;
    }

    .version-badge {
      background: rgba(255, 255, 255, 0.2);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      backdrop-filter: blur(10px);
    }

    .welcome-decoration {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 100%;
      opacity: 0.1;

      .decoration-circle {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 80px;
        height: 80px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
      }

      .decoration-line {
        position: absolute;
        bottom: 40px;
        right: 60px;
        width: 2px;
        height: 60px;
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(45deg);
      }
    }
  }

  // 通用样式
  .section-title {
    font-size: 24px;
    font-weight: 500;
    color: #2c3e50;
    margin: 0 0 24px 0;
    position: relative;
    padding-left: 16px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: #34495e;
      border-radius: 2px;
    }
  }

  // 系统概览
  .overview-section {
    margin-bottom: 32px;

    .overview-card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      margin-bottom: 16px;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      .card-icon {
        margin-bottom: 16px;

        i {
          font-size: 32px;
          color: #34495e;
        }
      }

      .card-content {
        h3 {
          font-size: 18px;
          font-weight: 500;
          color: #2c3e50;
          margin: 0 0 8px 0;
        }

        p {
          font-size: 14px;
          color: #7f8c8d;
          margin: 0;
          line-height: 1.4;
        }
      }
    }
  }

  // 技术架构
  .tech-section {
    margin-bottom: 32px;

    .tech-card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      margin-bottom: 16px;

      .tech-subtitle {
        font-size: 18px;
        font-weight: 500;
        color: #2c3e50;
        margin: 0 0 20px 0;
      }

      .tech-list {
        .tech-item {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          padding: 12px;
          background: #f8f9fa;
          border-radius: 8px;
          transition: all 0.3s ease;

          &:hover {
            background: #e9ecef;
          }

          i {
            font-size: 18px;
            color: #34495e;
            margin-right: 12px;
            width: 20px;
            text-align: center;
          }

          span {
            font-size: 14px;
            color: #2c3e50;
            font-weight: 500;
          }
        }
      }
    }
  }

  // 快速入口
  .quick-access-section {
    .quick-card {
      background: white;
      border-radius: 12px;
      padding: 24px 16px;
      text-align: center;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      cursor: pointer;
      margin-bottom: 16px;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        background: #34495e;
        color: white;

        i {
          color: white;
        }

        span {
          color: white;
        }
      }

      i {
        font-size: 32px;
        color: #34495e;
        margin-bottom: 12px;
        transition: all 0.3s ease;
      }

      span {
        font-size: 14px;
        font-weight: 500;
        color: #2c3e50;
        transition: all 0.3s ease;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home {
    padding: 16px;

    .welcome-section {
      padding: 32px 24px;

      .main-title {
        font-size: 28px;
      }

      .welcome-subtitle {
        font-size: 16px;
      }
    }

    .section-title {
      font-size: 20px;
    }

    .overview-card {
      height: 140px;
      padding: 20px;
    }

    .quick-card {
      height: 100px;
      padding: 20px 12px;
    }
  }
}
</style>

